<html   xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorator="layout"
        data-filterable-list>
<head>
    <title>Guides</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/guide.css}"/>
    <!-- http://opengraphprotocol.org/ -->
    <meta property="og:title" content="Spring Guides" />
    <meta property="og:image" th:content="@{/img/spring-by-pivotal.png}" />
    <meta property="og:description" content="these guides are designed to get you productive as quickly as
    possible and using the latest Spring project releases and techniques as recommended by the Spring team" />
</head>
<body>
  <div layout:fragment="header-container"></div>
  <div layout:fragment="content" class="container-fluid">
    <main class="main-body--wrapper">
      <h1 class="index-page--title">Guides</h1>
      <p class="index-page--subtitle with-subtext">Whatever you're building, these guides are designed to get you productive as quickly as possible &ndash; using the latest Spring project releases and techniques as recommended by the <a href="/team">Spring team</a>.<br/>
        <span class="subtext">
          Have a suggestion for a new guide? Let us know at <a href="https://twitter.com/intent/tweet?text=@springcentral&related=springcentral&hashtags=guides">@springcentral</a>.
        </span>
      </p>

      <a name="gs"></a>
      <div class="row-fluid content-container--wrapper guides-section--container">
        <div class="content-container--header">
          <input type='text' id='doc_filter' style="color:#aaa;" onfocus="this.value=''; this.style.color='#000'; this.style.fontStyle='normal'; this.onfocus='';" autofocus value="Find a guide..." placeholder="Find a guide..." class="content-container--filter"/>
        </div>
        <section class="content-container--body">
          <div data-filterable-container>
            <div class="content-section-title--container">
              <div class="pull-left icon icon-gs-guides"></div>
              <h3 class="content-section-title no-border no-margin">Getting Started Guides</h3>
              <p class="content-section-sub-title">Designed to be completed in 15-30 minutes, these guides provide quick, hands-on instructions for building the "Hello World" of any development task with Spring. In most cases, the only prerequisites are a JDK and a text editor.</p>
            </div>

            <div th:each="guide : ${guides}" class="guide--container" th:attr="data-filterable=${guide.title}+' '+${guide.description}+' '+${guide.projects}">
              <a class="guide--title" href="guide.html" th:href="@{'/guides/gs/'+${guide.name}+'/'}" th:text="${guide.title}"></a>
              <p class="guide--subtitle" th:text="${guide.description}"></p>
            </div>
          </div>
        </section>
        <section class="content-container--body" th:if="${not topicals.empty}">
          <div data-filterable-container>
            <div class="content-section-title--container">
              <div class="pull-left icon icon-topical"></div>
              <h3 class="content-section-title no-margin">Topical Guides</h3>
              <p class="content-section-sub-title">Designed to be read and comprehended in an hour or less, providing more wide-ranging or subjective content than a getting started guide.</p>
            </div>
            <div th:each="topical : ${topicals}" class="guide--container" th:attr="data-filterable=${topical.title}+' '+${topical.description}">
              <a class="guide--title" th:href="@{'/guides/topicals/'+${topical.name}+'/'}" th:text="${topical.title}"></a>
              <p class="guide--subtitle" th:text="${topical.description}"></p>
            </div>
          </div>
        </section>
        <section class="content-container--body">
          <div data-filterable-container>
            <div class="content-section-title--container">
              <div class="pull-left icon icon-tutorial"></div>
              <h3 class="content-section-title no-margin">Tutorials</h3>
              <p class="content-section-sub-title">Designed to be completed in 2-3 hours, these guides provide deeper, in-context explorations of enterprise application development topics, leaving you ready to implement real-world solutions.</p>
            </div>
            <div th:each="tutorial : ${tutorials}" class="guide--container" th:attr="data-filterable=${tutorial.title}+' '+${tutorial.description}">
              <a class="guide--title" th:href="@{'/guides/tutorials/'+${tutorial.name}+'/'}" th:text="${tutorial.title}"></a>
              <p class="guide--subtitle" th:text="${tutorial.description}"></p>
            </div>
          </div>
        </section>
      </div>
    </main>
  </div>
</body>
</html>
